<template>
  <!--个人作品-->
  <view>
    <myHead
      :title="title"
      :right="true"
      text_right="保存"
      @clickRight="clickRight"
    ></myHead>
    <view class="contenr">
      <view class="conten">
        <view class="li-box fl-lr-c">
          <view class="name">作品名称</view>
          <view class="input">
            <input
              placeholder-class="input_pal"
              type="text"
              v-model="WorksName"
              maxlength="20"
              placeholder="请输入（限20个字符）"
            />
          </view>
        </view>
        <view class="li-box fl-lr-c">
          <view class="name">作品链接</view>
          <view class="input">
            <input
              placeholder-class="input_pal"
              type="text"
              v-model="WorksUrl"
              placeholder="请输入"
            />
          </view>
        </view>
      </view>
      <view class="file-box" v-for="(item, index) in Attachs" :key="index">
        <view class="fl" style="width: 90%" @click="previewFile(item)">
          <view style="display: flex">
            <image
              v-if="item.filetype == 'pdf'"
              src="/static/recruit/home/pdf.png"
              class="image"
            ></image>
            <image
              v-else
              src="/static/recruit/home/word.png"
              class="image"
            ></image>
            <view style="flex: 1">
              <view class="name">
                {{ item.name }}
              </view>
            </view>
          </view>
        </view>
        <view class="del fl-t" @click="delJob(item, index)"> 删除 </view>
      </view>

      <view>
        <lsj-upload
          v-if="Attachs.length < 3"
          ref="lsjUpload"
          childId="upload1"
          :width="width"
          :height="height"
          :option="option"
          :size="size"
          :formats="formats"
          :debug="debug"
          :instantly="instantly"
          @change="onChange"
          @uploadEnd="onuploadEnd"
          @progress="progress"
          :count="count"
        >
          <view class="btn" :style="{ width: width, height: height }">
            <view class="file-box1">
              <view>
                <image
                  class="img"
                  src="/static/recruit/home/approveProfile.png"
                >
                </image>
              </view>
              <view class="shangchuan">
                <view class="shangtitle">上传</view>
                <view class="shangtext"
                  >最多上传3个附件，支持pdf、doc、docx后缀的文件，大小限制8M</view
                >
              </view>
            </view>
          </view>
        </lsj-upload>
      </view>
    </view>
    <bottomBut @bottomBut="bottomBut" v-if="type == 2"></bottomBut>
  </view>
</template>

<script>
import myHead from "@/pages/component/baseHead.vue";
import bottomBut from "@/pages/component/bottomBut.vue";
import lsjUpload from "@/uni_modules/lsj-upload/components/lsj-upload/lsj-upload.vue";

// import { Base64 } from "node_modules/js-base64/base64.js";

export default {
  data() {
    return {
      title: "个人作品",
      URL: this.$config.domain.staticUrl,
      // 上传接口参数
      option: {
        // 上传服务器地址，需要替换为你的接口地址
        url: this.$config.domain.baseUrl + "/api/core/file/upload",
        // 上传附件的key
        name: "file",
        // 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
        header: {
          Authorization:
            uni.getStorageSync("access_token").token_type +
            " " +
            uni.getStorageSync("access_token").access_token,
        },
      },
      // 选择文件后是否立即自动上传，true=选择后立即上传
      instantly: true,
      // 必传宽高且宽高应与slot宽高保持一致
      width: "750rpx",
      height: "300rpx",
      // 限制允许上传的格式，空串=不限制，默认为空 png、jpg、pdf、doc、ppt、docx、xls、xlsx、txt
      formats: "pdf,doc,ppt,docx,xls,xlsx,txt",
      // 文件上传大小限制
      size: 8,
      // 文件数量限制
      count: 3,

      // 文件回显列表
      files: new Map(),

      // 是否打印日志
      debug: true,

      upURL: this.$config.domain.staticUrl + "/fileview/onlinePreview?url=",
      type: 0, //1 add  2编辑
      // 当前id
      Id: 0,
      // 父id
      fuid: 0,

      WorksName: "",
      WorksUrl: "",
      Attachs: [],
    };
  },
  //子组件
  components: {
    myHead,
    bottomBut,
    lsjUpload,
  },
  onLoad(o) {
    this.type = o.type;
    this.fuid = o.fuid;

    if (this.type == 2) {
      let datao = JSON.parse(o.data);
      console.log(datao);

      this.Id = datao.Id;
      this.WorksName = datao.WorksName;
      this.WorksUrl = datao.WorksUrl;

      if (datao.Attachment) {
        this.Attachs = JSON.parse(datao.Attachment);
      }
    }
  },
  onShow() {},
  created() {},
  // 计算方法
  methods: {
    // 文件选择回调
    onChange(files) {
      //	console.log('当前选择的文件列表：', JSON.stringify([...files.values()]));
      // 更新选择的文件
      this.files = files;
    },
    progress(item) {
      // 更新当前状态变化的文件
      this.files.set(item.name, item);
    },
    // 上传结束
    onuploadEnd(item) {
      let that = this;
      console.log("上传结束");
      // ---可删除--演示上传完成后取服务端数据
      if (item["responseText"]) {
        let datalift = JSON.parse(item.responseText);
        if (datalift.Success) {
          console.log("上传成功");
          if (datalift.Result) {
            let obj = {
              name: datalift.Result.OriginalName,
              url: datalift.Result.Path,
            };
            this.Attachs.push(obj);
          }
        }
      }
    },

    // 预览附件简历
    previewFile(item) {
      let ures = this.URL + item.url;
      uni.navigateTo({
        url: `/pages/views/packageB/type-jobhunting/previewFile?src=${ures}&title=${item.name}`,
      });
    },

    clickRight() {
      if (!this.WorksName) {
        this.$util.toast("请输入作品名称");
        return;
      }

      console.log("-", this.Attachs.length);

      if (this.Attachs.length == 0) {
        this.$util.toast("请上传作品");
        return;
      }

      if (this.type == 2) {
        //编辑修改
        let obj = {
          Id: this.Id,
          ResumeId: this.fuid, //简历Id
          WorksName: this.WorksName, //作品名称
          WorksUrl: this.WorksUrl, //作品链接
          Attachment: JSON.stringify(this.Attachs), //作品附件(json格式)
        };
        this.$http.huirc.portfolioup(obj).then((res) => {
          if (res.Success) {
            this.$util.toast("保存成功");
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          }
        });
      } else {
        let obj = {
          ResumeId: this.fuid, //简历Id
          WorksName: this.WorksName, //作品名称
          WorksUrl: this.WorksUrl, //作品链接
          Attachment: JSON.stringify(this.Attachs), //作品附件(json格式)
        };
        this.$http.huirc.portfoliocr(obj).then((res) => {
          if (res.Success) {
            this.$util.toast("保存成功");
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          }
        });
      }
    },

    delJob(item, index) {
      this.Attachs.splice(index, 1);
    },

    bottomBut() {
      let that = this;
      console.log("删除");
      uni.showModal({
        title: "删除提示",
        content: "确认要删除这条数据",
        success: function (res) {
          if (res.confirm) {
            let data = {
              Id: that.Id,
            };
            that.$http.huirc.portfoliodel(data).then((res) => {
              if (res.Success) {
                that.$util.toast("删除成功");
                setTimeout(() => {
                  uni.navigateBack();
                }, 1600);
              }
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.conten {
  margin-bottom: 0rpx;
}
.file-box1 {
  padding: 30rpx 0rpx;
  background: #ffffff;
  margin: 20rpx;
  border-radius: 10rpx;
  display: flex;
  box-sizing: border-box;

  .img {
    width: 236rpx;
    height: 192rpx;
  }

  .shangchuan {
    .shangtitle {
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
      padding: 10rpx 0;
    }

    .shangtext {
      font-size: 22rpx;
      color: #999999;
      margin-top: 40rpx;
      padding: 0 0 0 50rpx;
    }
  }
}
.contenr {
  .li-box {
    background-color: #fff;
    .name {
      width: 260rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: #000000;
      flex-shrink: 0;
    }

    .input_pal,
    input {
      font-size: 30rpx;
      font-weight: 500;
      color: #999999;
      text-align: end;
    }

    .input {
      flex: 1;
    }
  }
}

.file-box {
  padding: 30rpx 40rpx;
  background: #ffffff;
  margin: 20rpx;
  border-radius: 10rpx;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;

  .del {
    width: 10%;
    color: red;
    font-size: 26rpx;
  }

  .image {
    width: 36rpx;
    height: 36rpx;
    margin-right: 30rpx;
    flex-shrink: 0;
  }

  .name {
    font-size: 28rpx;
    color: #000000;
    table-layout: fixed;
    word-break: break-all;
    overflow: hidden;
  }
}

.lsjclass {
  margin-top: 20rpx;
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #ffffff;
  font-weight: 500;
  font-size: 30rpx;

  .lsjnrclass {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 40rpx;

    .lsjnrclasslift {
      border: 1px solid #939393;
      font-size: 30px;
      height: 150rpx;
      width: 150rpx;
      border-radius: 10rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;
      color: #707070;
    }

    .lsjnrclassright {
      flex: 1;
      font-size: 28rpx;
    }
  }
}
</style>